<template>
  <div class="app-container">
    <el-dialog
      :visible="visible"
      :title="$t('info')"
      width="80%"
      @close="close"
      @closed="closed"
    >
      <el-form
        ref="detailRef"
        :model="detailDataForm"
        :disabled="operation === 0"
      >
        <el-descriptions
          class="margin-top"
          :title="$t('BasicInformation')"
          :column="2"
          border
        >
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("harvestLang.orderNumber") }}
            </template>
            {{ detailDataForm.orderNo }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("depotLang.depot") }}
            </template>
            {{ detailDataForm.depotCodeAndName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("statusLang.status") }}
            </template>
            {{
              this.$t(
                "statusLang." +
                  getTitleByValue(
                    deliveryStatusOptions,
                    detailDataForm.orderStatus
                  )
              )
            }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("harvestLang.customerName") }}
            </template>
            {{ detailDataForm.customerCodeAndName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("harvestLang.logisticsProducts") }}
            </template>
            {{ detailDataForm.channelName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("orderDate") }}
            </template>
            {{ detailDataForm.gmtCreated }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("warehouseEntryLang.provider") }}
            </template>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("estimatedArrivalDate") }}
            </template>
            {{ detailDataForm.gmtExpected }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("harvestLang.providerChannel") }}
            </template>
            {{ detailDataForm.providerChannelName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("receivingDate") + " : " }}
            </template>
            {{ detailDataForm.gmtArrived }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("shelfDate") }}
            </template>
            {{ detailDataForm.gmtShelve }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              {{ this.$t("gmtModified") + " : " }}
            </template>
            {{ detailDataForm.gmtModified }}
          </el-descriptions-item>
        </el-descriptions>
      </el-form>
      <h3>{{ $t("otherInformation") }}</h3>
      <div>
        <el-tabs type="border-card">
          <!-- 装箱清单 -->
          <el-tab-pane :label="$t('harvestLang.packingList')">
            <el-table :data="packingListData" border class="mt-10">
              <el-table-column
                :label="$t('tableIndex')"
                type="index"
                align="center"
                width="80"
              />
              <el-table-column
                :label="$t('goodsSKULang.boxNumber')"
                prop="boxBarCode"
                align="center"
              />
              <el-table-column
                :label="
                  $t('goodsSKULang.length') +
                    '*' +
                    $t('goodsSKULang.width') +
                    '*' +
                    $t('goodsSKULang.height') +
                    '(CM)'
                "
                prop="boxSize"
                align="center"
              />
              <el-table-column
                :label="$t('goodsSKULang.weight') + '(KG)'"
                prop="boxWeight"
                align="center"
              />
            </el-table>
          </el-tab-pane>
          <!-- 入库单箱子明细 -->
          <el-tab-pane :label="$t('harvestLang.boxDetail')">
            <el-table :data="boxDetailData" border class="mt-10">
              <el-table-column
                :label="$t('tableIndex')"
                type="index"
                align="center"
                width="80"
              />
              <el-table-column
                :label="$t('goodsSKULang.boxNumber')"
                prop="boxBarCode"
                align="center"
                width="150"
              />
              <el-table-column
                :label="$t('goodsSKULang.skuCode')"
                prop="skuCode"
                align="center"
                width="100"
              />
              <el-table-column
                :label="$t('goodsSKULang.goodsName')"
                prop="skuName"
                align="center"
              />
              <el-table-column
                :label="$t('harvestLang.deliveryQuantity')"
                prop="skuNum"
                align="center"
              />
              <el-table-column
                :label="$t('harvestLang.transitReceipts')"
                prop="transReceivedNum"
                align="center"
              />
              <el-table-column
                :label="$t('harvestLang.receivedNumberOfDestination')"
                prop="receivedNum"
                align="center"
              />
              <el-table-column
                :label="$t('goodsSKULang.numberOfShelves')"
                prop="shelfStockingNum"
                align="center"
              />
            </el-table>
          </el-tab-pane>
          <!-- 入库单产品明细-->
          <el-tab-pane :label="$t('harvestLang.productsDetail')">
            <el-table :data="productsDetailData" border class="mt-10">
              <el-table-column
                :label="$t('tableIndex')"
                type="index"
                align="center"
                width="80"
              />
              <el-table-column
                :label="$t('goodsSKULang.skuCode')"
                prop="skuCode"
                align="center"
                width="100"
              />
              <el-table-column
                :label="$t('goodsSKULang.goodsName')"
                prop="skuName"
                align="center"
                width="100"
              />
              <el-table-column
                :label="$t('harvestLang.deliveryQuantity')"
                prop="skuNum"
                align="center"
              />
              <el-table-column
                :label="$t('harvestLang.transitReceipts')"
                prop="transReceivedNum"
                align="center"
              />
              <el-table-column
                :label="$t('harvestLang.receivedNumberOfDestination')"
                prop="receivedNum"
                align="center"
              />
              <el-table-column
                :label="$t('goodsSKULang.numberOfShelves')"
                prop="shelfStockingNum"
                align="center"
              />
            </el-table>
          </el-tab-pane>
          <!-- 入库记录-->
          <el-tab-pane :label="$t('harvestLang.receiptRecords')">
            <el-table :data="receiptRecordsData" border class="mt-10">
              <el-table-column
                type="index"
                center
                :label="$t('tableIndex')"
                width="80"
              />
              <el-table-column
                :label="$t('goodsSKULang.skuCode')"
                prop="skuCode"
                align="center"
                min-width="80"
              />
              <el-table-column
                :label="$t('goodsSKULang.productQuantity')"
                prop="skuNum"
                align="center"
                min-width="80"
              />
              <el-table-column
                :label="$t('goodsSKULang.operator')"
                prop="operator"
                align="center"
                min-width="100"
              />
              <el-table-column
                :label="$t('goodsSKULang.operatingInstructions')"
                prop="description"
                align="center"
                min-width="200"
              >
                <template v-slot="scope">
                  <p>
                    {{ $t("goodsSKULang.skuCode") + ":" }}<span>{{ scope.row.skuCode }}</span>
                  </p>
                  <p>Qty:<span>{{ scope.row.skuNum }}</span></p>
                  <p>Size:<span>{{ scope.row.skuSize }}</span></p>
                  <p>Weight:<span>{{ scope.row.weight }}</span></p>
                </template>
              </el-table-column>
              <el-table-column
                :label="$t('goodsSKULang.dataSources')"
                prop="fromTerminal"
                align="center"
                min-width="100"
              >
                <template v-slot="{ row }">
                  {{
                    $t(
                      "statusLang." +
                        getTitleByValue(dataSourceOptions, row.fromTerminal)
                    )
                  }}
                </template>
              </el-table-column>
              <el-table-column
                :label="$t('operateTime')"
                prop="domesticDate,depotDate"
                min-width="150"
              >
                <template v-slot="{ row }">
                  <p>
                    {{ $t("domesticDate") + " : "
                    }}<span>{{ row.domesticDate }}</span>
                  </p>
                  <p>
                    {{ $t("warehouseDate") + " : "
                    }}<span>{{ row.depotDate }}</span>
                  </p>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <!-- 上架记录 -->
          <el-tab-pane :label="$t('harvestLang.uploadingRecords')">
            <el-table :data="uploadingRecordsData" border class="mt-10">
              <el-table-column type="index" center :label="$t('tableIndex')" />
              <el-table-column
                :label="$t('goodsSKULang.skuCode')"
                prop="skuCode"
                align="center"
                width="100"
              />
              <el-table-column
                :label="$t('goodsSKULang.productQuantity')"
                prop="skuNum"
                align="center"
                width="100"
              />
              <el-table-column
                :label="$t('goodsSKULang.operator')"
                prop="operator"
                align="center"
              />
              <el-table-column
                :label="$t('goodsSKULang.operatingInstructions')"
                prop="description"
                align="center"
              >
                <template v-slot="scope">
                  <p>
                    SKU:<span>{{ scope.row.skuCode }}</span>
                  </p>
                  <p>Qty:<span>{{ scope.row.skuNum }}</span></p>
                  <p>Size:<span>{{ scope.row.skuSize }}</span></p>
                  <p>Weight:<span>{{ scope.row.weight }}</span></p>
                </template>
              </el-table-column>
              <el-table-column
                :label="$t('goodsSKULang.dataSources')"
                prop="fromTerminal"
                align="center"
              >
                <template v-slot="{ row }">
                  {{
                    $t(
                      "statusLang." +
                        getTitleByValue(dataSourceOptions, row.fromTerminal)
                    )
                  }}
                </template>
              </el-table-column>

              <el-table-column
                :label="$t('operateTime')"
                prop="domesticDate,depotDate"
              >
                <template v-slot="{ row }">
                  <p>
                    {{ $t("domesticDate") + " : "
                    }}<span>{{ row.domesticDate }}</span>
                  </p>
                  <p>
                    {{ $t("warehouseDate") + " : "
                    }}<span>{{ row.depotDate }}</span>
                  </p>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <!-- 操作日志 -->
          <el-tab-pane v-if="false" :label="$t('harvestLang.operationLog')">
            <el-table :data="operationLogData" border class="mt-10">
              <el-table-column
                :label="$t('tableIndex')"
                type="index"
                align="center"
                width="80"
              />
              <el-table-column
                :label="$t('harvestLang.modification')"
                prop="boxNumber"
                align="center"
              />
              <el-table-column
                :label="$t('goodsSKULang.operator')"
                prop="operator"
                align="center"
              />
              <el-table-column
                :label="$t('harvestLang.originalState')"
                prop="pending"
                align="center"
              />
              <el-table-column
                :label="$t('harvestLang.modifiedState')"
                prop="modifiedState"
                align="center"
              />
              <el-table-column
                :label="$t('operateTime')"
                prop="domesticDate,depotDate"
                align="center"
              >
                <template v-slot="{ row }">
                  <p>
                    {{ $t("domesticDate") + " : "
                    }}<span>{{ row.domesticDate }}</span>
                  </p>
                  <p>
                    {{ $t("warehouseDate") + " : "
                    }}<span>{{ row.depotDate }}</span>
                  </p>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <!-- 操作节点 -->
          <el-tab-pane :label="$t('harvestLang.operationNode')">
            <el-table :data="operationNodeData" border class="mt-10">
              <el-table-column type="index" center :label="$t('tableIndex')" />
              <el-table-column
                :label="$t('harvestLang.operationType')"
                prop="operationType"
                align="center"
              >
                <template v-slot="scope">
                  {{
                    $t(
                      "statusLang." +
                        getTitleByValue(
                          deliveryStatusOptions,
                          scope.row.orderStatus
                        )
                    )
                  }}
                </template>
              </el-table-column>
              <el-table-column
                :label="$t('operation')"
                prop="operationContent,orderStatus"
                align="center"
              >
                <template slot-scope="scope">
                  <div
                    v-if="
                      scope.row.orderStatus ===
                        deliveryStatusDict.PARTIAL_RECEIVED.value ||
                        scope.row.orderStatus ===
                        deliveryStatusDict.RECEIPT_COMPLETED.value
                    "
                  >
                    <p>
                      {{ $t("harvestLang.forecastBoxCount") + " : "
                      }}<span>{{ scope.row.operationContent.preBoxNum }}</span>
                    </p>
                    <p>
                      {{ $t("harvestLang.receivedBoxCount") + " : "
                      }}<span>{{
                        scope.row.operationContent.receivedBoxNum
                      }}</span>
                    </p>
                    <p>
                      {{ $t("harvestLang.waitArrivalBoxNumber") + " : "
                      }}<span>{{
                        scope.row.operationContent.waitArrivalBoxNum
                      }}</span>
                    </p>
                    <p>
                      {{ $t("harvestLang.numberOfBins") + " : "
                      }}<span>{{
                        scope.row.operationContent.arrivalBoxNum
                      }}</span>
                    </p>
                  </div>
                  <div
                    v-else-if="
                      scope.row.orderStatus === 16
                    "
                  >
                    <p>
                      {{ $t("harvestLang.orderNumber") + " : "
                      }}<span>{{
                        scope.row.operationContent.orderNumber
                      }}</span>
                    </p>
                    <p>
                      {{ $t("harvestLang.totalNum") + " : "
                      }}<span>{{ scope.row.operationContent.totalNum }}</span>
                    </p>
                    <p>
                      {{ $t("harvestLang.skuTypeNum") + " : "
                      }}<span>{{ scope.row.operationContent.skuTypeNum }}</span>
                    </p>
                    <p>
                      {{ $t("harvestLang.totalSkuNum") + " : "
                      }}<span>{{
                        scope.row.operationContent.totalSkuNum
                      }}</span>
                    </p>
                  </div>
                  <div v-else>
                    <span />
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                :label="$t('goodsSKULang.operator')"
                prop="operator"
                align="center"
              />
              <el-table-column
                :label="$t('operateTime')"
                prop="domesticDate,depotDate"
              >
                <template v-slot="{ row }">
                  <p>
                    {{ $t("domesticDate") + " : "
                    }}<span>{{ row.domesticDate }}</span>
                  </p>
                  <p>
                    {{ $t("warehouseDate") + " : "
                    }}<span>{{ row.depotDate }}</span>
                  </p>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { deliveryStatusDict, dataSourceDict } from '@/utils/dictData'
import { getDictOptionList, getTitleByValue } from '@/utils/dictUtils'
import {
  getDeliveredOrderInfo,
  getDeliveredOrderBoxList,
  getDeliveredOrderBoxSkuList,
  getDeliveredOrderSkuList,
  getDeliveredOrderReceivedLogList,
  getDeliveredOrderShelvingLogList,
  getDeliveredOperationNodeList
} from '@/api/business/warehouseManage/harvest'
export default {
  name: 'InfoForm',
  props: {
    value: {
      type: Number,
      default: null
    },
    visible: {
      type: Boolean,
      default: false
    },
    operation: {
      type: Number,
      default: 0 // 0 查看
    }
  },
  data() {
    return {
      detailDataForm: {},
      packingListData: [], // 装箱清单
      boxDetailData: [], // 入库单箱子明细
      productsDetailData: [], // 入库单产品明细
      receiptRecordsData: [], // 入库记录
      uploadingRecordsData: [], // 上架记录
      operationNodeData: [], // 操作节点
      operationLogData: [], // 操作日志
      getTitleByValue: getTitleByValue,
      deliveryStatusDict: deliveryStatusDict,
      dataSourceOptions: getDictOptionList(dataSourceDict), // 数据源
      deliveryStatusOptions: getDictOptionList(deliveryStatusDict) // 状态下拉
    }
  },
  watch: {
    value: {
      handler(newVal, oldVal) {
        if (newVal != null && newVal !== undefined && newVal !== oldVal) {
          this.getData()
          this.getDeliveredOrderBoxList()
          this.getDeliveredOrderBoxSkuList()
          this.getDeliveredOrderSkuList()
          this.getDeliveredOrderReceivedLogList()
          this.getDeliveredOrderShelvingLogList()
          this.getDeliveredOperationNodeList()
        }
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 基础信息
    async getData() {
      if (!this.value) return
      const res = await getDeliveredOrderInfo({
        orderId: this.value
      })
      if (!res || res.data === null) return
      this.detailDataForm = res.data.deliveredOrderInfoPageDTO
    },
    // 装箱清单详情
    async getDeliveredOrderBoxList() {
      const { data } = await getDeliveredOrderBoxList({
        orderId: this.value
      })
      this.packingListData = data?.boxPageDTOList
    },
    // 入库单箱明细
    async getDeliveredOrderBoxSkuList() {
      const { data } = await getDeliveredOrderBoxSkuList({
        orderId: this.value
      })
      this.boxDetailData = data?.boxSkuDTOList
    },
    // 入库单产品明细
    async getDeliveredOrderSkuList() {
      const { data } = await getDeliveredOrderSkuList({
        orderId: this.value
      })
      this.productsDetailData = data?.boxSkuDTOList
    },
    // 入库记录详情
    async getDeliveredOrderReceivedLogList() {
      const { data } = await getDeliveredOrderReceivedLogList({
        orderId: this.value
      })
      this.receiptRecordsData = data?.detailDTOList
    },
    // 上架记录
    async getDeliveredOrderShelvingLogList() {
      const { data } = await getDeliveredOrderShelvingLogList({
        orderId: this.value
      })

      this.uploadingRecordsData = data?.detailDTOList
    },
    // 操作节点
    async getDeliveredOperationNodeList() {
      const { data } = await getDeliveredOperationNodeList({
        orderId: this.value
      })
      this.operationNodeData = data?.nodeDTOList
    },
    close() {
      this.$emit('close')
    },
    closed() {
      this.reset()
    },
    reset() {}
  }
}
</script>

<style></style>
